<template>
  <div class="grpc-demo">
    <h2>gRPC Web Demo</h2>
    
    <!-- 连接状态 -->
    <div class="status-section">
      <h3>连接状态</h3>
      <div class="status-indicator" :class="{ connected: isConnected }">
        {{ isConnected ? '已连接' : '未连接' }}
      </div>
      <button @click="checkConnection" :disabled="loading">检查连接</button>
    </div>

    <!-- DIS 状态 -->
    <div class="section">
      <h3>DIS 状态</h3>
      <button @click="queryDISStatus" :disabled="loading">查询 DIS 状态</button>
      <div v-if="disStatus" class="result">
        <pre>{{ JSON.stringify(disStatus, null, 2) }}</pre>
      </div>
    </div>

    <!-- 队列信息 -->
    <div class="section">
      <h3>队列信息</h3>
      <button @click="queryQueueInfos" :disabled="loading">查询队列信息</button>
      <div v-if="queueInfos" class="result">
        <pre>{{ JSON.stringify(queueInfos, null, 2) }}</pre>
      </div>
    </div>

    <!-- 客户端列表 -->
    <div class="section">
      <h3>客户端列表</h3>
      <button @click="queryClientList" :disabled="loading">查询客户端列表</button>
      <div v-if="clientList" class="result">
        <pre>{{ JSON.stringify(clientList, null, 2) }}</pre>
      </div>
    </div>

    <!-- 历史记录表 -->
    <div class="section">
      <h3>历史记录表</h3>
      <button @click="queryHisRecordTable" :disabled="loading">查询历史记录</button>
      <div v-if="hisRecordTable" class="result">
        <pre>{{ JSON.stringify(hisRecordTable, null, 2) }}</pre>
      </div>
    </div>

    <!-- 上传包裹数据 -->
    <div class="section">
      <h3>上传包裹数据</h3>
      <div class="upload-form">
        <div class="form-group">
          <label>设备 ID:</label>
          <input v-model="uploadForm.deviceId" type="text" placeholder="输入设备 ID">
        </div>
        <div class="form-group">
          <label>包裹流水号:</label>
          <input v-model="uploadForm.prn" type="text" placeholder="输入包裹流水号">
        </div>
        <div class="form-group">
          <label>上传文件类型:</label>
          <input v-model="uploadForm.uploadFilebit" type="number" placeholder="输入文件类型">
        </div>
        <button @click="uploadBagData" :disabled="loading">立即上传</button>
      </div>
      <div v-if="uploadResult" class="result">
        <pre>{{ JSON.stringify(uploadResult, null, 2) }}</pre>
      </div>
    </div>

    <!-- 上传进度 -->
    <div class="section">
      <h3>上传进度</h3>
      <button @click="queryUploadProgress" :disabled="loading">查询上传进度</button>
      <div v-if="uploadProgress" class="result">
        <pre>{{ JSON.stringify(uploadProgress, null, 2) }}</pre>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      加载中...
    </div>

    <!-- 错误信息 -->
    <div v-if="error" class="error">
      {{ error }}
    </div>
  </div>
</template>

<script>
import grpcService from '../grpc/grpcClient.js';

export default {
  name: 'GrpcDemo',
  data() {
    return {
      loading: false,
      error: null,
      isConnected: false,
      disStatus: null,
      queueInfos: null,
      clientList: null,
      hisRecordTable: null,
      uploadResult: null,
      uploadProgress: null,
      uploadForm: {
        deviceId: '',
        prn: '',
        uploadFilebit: 0
      }
    };
  },
  mounted() {
    this.checkConnection();
  },
  methods: {
    async checkConnection() {
      this.loading = true;
      this.error = null;
      try {
        this.isConnected = grpcService.isConnected();
        if (this.isConnected) {
          // 尝试调用一个简单的服务来验证连接
          const result = await grpcService.queryDISStatus();
          this.isConnected = result.success;
        }
      } catch (error) {
        this.error = `连接检查失败: ${error.message}`;
        this.isConnected = false;
      } finally {
        this.loading = false;
      }
    },

    async queryDISStatus() {
      this.loading = true;
      this.error = null;
      try {
        const result = await grpcService.queryDISStatus();
        if (result.success) {
          this.disStatus = result.data;
        } else {
          this.error = result.error;
        }
      } catch (error) {
        this.error = `查询 DIS 状态失败: ${error.message}`;
      } finally {
        this.loading = false;
      }
    },

    async queryQueueInfos() {
      this.loading = true;
      this.error = null;
      try {
        const result = await grpcService.queryQueueInfos();
        if (result.success) {
          this.queueInfos = result.data;
        } else {
          this.error = result.error;
        }
      } catch (error) {
        this.error = `查询队列信息失败: ${error.message}`;
      } finally {
        this.loading = false;
      }
    },

    async queryClientList() {
      this.loading = true;
      this.error = null;
      try {
        const result = await grpcService.queryClientList();
        if (result.success) {
          this.clientList = result.data;
        } else {
          this.error = result.error;
        }
      } catch (error) {
        this.error = `查询客户端列表失败: ${error.message}`;
      } finally {
        this.loading = false;
      }
    },

    async queryHisRecordTable() {
      this.loading = true;
      this.error = null;
      try {
        const result = await grpcService.queryHisRecordTable();
        if (result.success) {
          this.hisRecordTable = result.data;
        } else {
          this.error = result.error;
        }
      } catch (error) {
        this.error = `查询历史记录失败: ${error.message}`;
      } finally {
        this.loading = false;
      }
    },

    async uploadBagData() {
      if (!this.uploadForm.deviceId || !this.uploadForm.prn) {
        this.error = '请填写设备 ID 和包裹流水号';
        return;
      }

      this.loading = true;
      this.error = null;
      try {
        const infos = [{
          device_id: this.uploadForm.deviceId,
          prn: this.uploadForm.prn,
          upload_filebit: parseInt(this.uploadForm.uploadFilebit) || 0
        }];
        
        const result = await grpcService.uploadBagDataImmediately(infos);
        if (result.success) {
          this.uploadResult = result.data;
        } else {
          this.error = result.error;
        }
      } catch (error) {
        this.error = `上传包裹数据失败: ${error.message}`;
      } finally {
        this.loading = false;
      }
    },

    async queryUploadProgress() {
      this.loading = true;
      this.error = null;
      try {
        const result = await grpcService.queryIMUploadingProgress();
        if (result.success) {
          this.uploadProgress = result.data;
        } else {
          this.error = result.error;
        }
      } catch (error) {
        this.error = `查询上传进度失败: ${error.message}`;
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.grpc-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.status-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #e8f5e8;
}

.status-indicator {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  margin-right: 10px;
  background-color: #ff6b6b;
  color: white;
}

.status-indicator.connected {
  background-color: #51cf66;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.result {
  margin-top: 15px;
  padding: 15px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: auto;
}

.result pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #007bff;
  font-weight: bold;
}

.error {
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

.upload-form {
  margin-bottom: 15px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

h3 {
  color: #555;
  margin-bottom: 15px;
}
</style> 